<template>
    <div style="height: 100%">
      <div class="main-tab">
        <x-header id="header" slot="header" :left-options="{showBack: false}" >
          <x-icon type="ios-arrow-back" slot="left" style="fill:#fff;" @click="back"></x-icon>
          <span slot="default" class="header-tit">文章详情</span>
        </x-header>
        <div class="main">
          <group>
            <cell-box>
              <img :src="article.avatar" class="avatar" @click="userpage(article.cid,article.id)">
              <span class="name" @click="userpage(article.cid,article.id)">{{article.nickname}}</span>
              <div class="follow">
                <div class="focus-icon" v-if="article.isFollow === 0" @click="editUserRelation(article.cid)">
                  <span class="jia">+</span><span class="focus">关注</span>
                </div>
                <div class="focus-icon-do" v-if="article.isFollow === 1" @click="editUserRelation(article.cid)">
                  <span class="dofocus">已关注</span>
                </div>
              </div>
            </cell-box>
            <swiper auto style="width:100%" height="15rem" dots-class="custom-bottom" dots-position="center" >
              <swiper-item class="swiper-demo-img" v-for="(item, index) in article.pictureArray" :key="index">
                <img :src="item" style="width: 100%">
              </swiper-item>
            </swiper>
            <div class="address">
              <img src="../../../static/icon/article/send-location-map.png" alt="" class="address-ico">
              <span class="address-tit">浙江省温州市鹿城区春晖路103号</span>
            </div>
            <div class="art-content">
              <span>{{article.content}}</span>
            </div>
            <div class="share-star-container">
              <div class="share">
                <img src="../../../static/icon/article/article-star.png" alt="" v-if="article.isCollect %2===0" @click="collect">
                <img src="../../../static/icon/star2.png" alt="" v-if="article.isCollect %2===1 " @click="collect">
                <span>{{article.collectCount}}</span>
              </div>
              <div class="share">
                <img src="../../../static/icon/article/article-share.png" alt="">
                <span>11</span>
              </div>
            </div>
            <div class="comment">
              <div class="art-comment">
                <div class="total-comment">共{{article.commentCount}}条评论</div>
                <div class="art-user" v-for="(item,index) in article.commenter" :key="index">
                  <span class="user">{{item.commenterName}}：</span>
                  <span class="user-comment">{{item.commentContent}}</span>
                </div>
                <div class="search-comment"><span @click="seeComment(article.id)">查看更多评论</span></div>
              </div>
            </div>
            <div>
              <x-input placeholder="添加评论..." v-model="commentContent" @click.native="buttonShow">
                <img :src="avatar" slot="label" style="width:2.5rem;height: 2.5rem;padding-right:10px;display:block;border-radius:10%; overflow:hidden; ">
                <x-button class="verification" plain slot="right" type="primary" mini @click.native="addArticleComment(article.articleType,article.id)" v-show="isbutton">发送</x-button>
              </x-input>
            </div>
          </group>
        </div>
      </div>
    </div>
</template>

<script>
  import { cookie } from 'vux'
  import { getArticleDetail,getArticleCommentList,collect,addArticleComment } from '@/api/forum'
  import { getUserDetail,editUserRelation } from '@/api/user'
    export default {
        inject:['reload'],
        name: "articledetail",
      components:{
        focus
      },
      data(){
          return{
            star1:true,
            star2:false,
            isbutton:false,
            id:'',
            cid:1,
            articleid:'',
            avatar:'',
            commentContent:'',
            toUserId:'',
            article:[
            ],
            list:[
              {
                url: 'javascript:',
                imgUrl: require('../../../static/img/1.png'),
                title: '遇见'
              },
              {
                url: 'javascript:',
                imgUrl: require('../../../static/img/1.png'),
                title: '遇见'
              },
            ],
          }
      },
      methods:{
          seeComment(id){
            this.globalData.id=id
            this.$router.push({
              name:'morecomment'
            })
          },
        getArticleDetail(){
            this.id=this.globalData.articleid;
          this.cid=JSON.parse(cookie.get('userInfo')).id;
          getArticleDetail({
            id:this.id,
            cid:this.cid
          }).then(res =>{
            this.article=res;
          })
        },
        getArticleCommentList(){
          this.articleId=this.globalData.articleid
          console.log(this.articleId)
          getArticleCommentList(parseInt(this.articleId)).then(res=>{
            console.log(res)
          })
        },
        back(){
          this.$router.go(-1)
        },
        collect(){
          this.articleId=this.globalData.articleid;
          collect({
            articleId: this.articleId,
            cid:this.cid
          }).then(res =>{
            if (res === 1){
              this.$vux.toast.show({
                text:'收藏成功！',
                type:'success',
                time: 300
              })
            }
            if (res ===0){
              this.$vux.toast.show({
                text:'取消收藏！',
                type:'success',
                time: 300
              })
            }
            this.reload()
          })
        },
        getUserDetail(){
          getUserDetail(this.cid).then(res =>{
            this.avatar=res.avatar;
          })
        },
        addArticleComment(articleType,id){
            this.Type=articleType
            this.articleId=id;
          this.cid=JSON.parse(cookie.get('userInfo')).id;
          addArticleComment({
            articleType:this.Type,
            articleId:this.articleId,
            commenterId:this.cid,
            commentContent:this.commentContent,
          }).then(data =>{
            this.$vux.toast.show({
              text: '评论成功',
              type:'success',
              time: 300
            })
            this.reload()
          }).catch(data =>{
            this.$vux.toast.show({
              text: data,
              type:'cancel',
              time: 300
            })
            this.reload()
          })
        },
        buttonShow(){
            this.isbutton=true;
        },
        editUserRelation(cid){
            this.relid=cid;
          this.cid=JSON.parse(cookie.get('userInfo')).id;
          this.torelid=this.cid
          editUserRelation({
            cid:this.relid,
            toUserId:this.torelid
          }).then(res=>{
            if (res === 1){
              this.$vux.toast.show({
                text:'关注成功！',
                type:'success',
                time: 300
              })
            }
            if (res ===0){
              this.$vux.toast.show({
                text:'已取关！',
                type:'success',
                time: 300
              })
            }
            this.reload()
          })
        },
        userpage(cid,id){
            this.globalData.articleCid=cid;
            this.globalData.articleId=id;
          this.$router.push({
            name:'userpage'
          })
        }
      },
      created(){
          this.getArticleDetail();
          this.getArticleCommentList();
          this.getUserDetail();
      }
    }
</script>

<style scoped>
  .header-tit{
    margin-top: 0.2rem;
  }
  #header{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
  }
  .main{
    padding-top: 28px;
    height: 4.29rem;
  }
  .follow{
    position: absolute;
    right: 4%;
  }
  .avatar{
    width: 2.78rem;
    height: 2.78rem;
    border: 1px solid #F4F4F4;
    border-radius:50%; overflow:hidden;
  }
  .name{
    font-family: "PingFangSC-Semibold",serif;
    font-size: 17px;
    color: #030303;
    letter-spacing: -0.41px;
    text-align: center;
    margin-left: 1.08rem;
  }
  .address{
    display: flex;
    flex-direction: row;
    background-color: #FFFFFF;
    margin-bottom: 1.07rem;
  }
  .address-ico{
    width: 1.07rem;
    height: 1.07rem;
    margin-left: 1.07rem;
    margin-top: 1.28rem;
  }
  .address-tit{
    font-size: 14px;
    color: #9B9B9B;
    letter-spacing: 0;
    text-align: justify;
    margin-top: 1.28rem;
    margin-left: 0.36rem;
  }
  .art-content{
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: -0.34px;
    text-align: justify;
    background-color: #FFFFFF;
    margin-left: 1.07rem;
    margin-bottom: 1.07rem;
  }
  .art-content span{
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: -0.34px;
    text-align: justify;
  }
  .share-star-container{
    display: flex;
    justify-content: flex-end;
    margin-right: 1.07rem;
    margin-bottom: 1.07rem;
  }
  .share{
    height: 1.28rem;
    display: flex;
    align-items: flex-start;
    margin-left: 1.43rem;
  }
  .share img{
    width: 1.28rem;
    height: 1.28rem;
  }
  .share span{
    font-size: 10px;
    color: #9B9B9B;
    letter-spacing: 0;
    text-align: justify;
  }
  .comment{
    height: 12.65rem;
  }
  .art-comment{
    margin-left: 1.07rem;
    margin-right: 1.07rem;
    /*margin-bottom: 1.07rem;*/
    background: #F4F4F4;
    border-radius: 2px;
    overflow: hidden;
  }
  .total-comment{
    font-size: 14px;
    color: #9B9B9B;
    letter-spacing: 0;
    text-align: justify;
    line-height: 1.43rem;
    margin-left: 1.07rem;
    margin-top: 1.07rem;
    margin-bottom: 0.72rem;
  }
  .art-user{
    display: flex;
    flex-direction: row;
    margin-left: 1.07rem;
    margin-bottom: 0.35rem;
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: 0;
    text-align: justify;
  }
  .search-comment{
    margin-top: 0.72rem;
    margin-bottom: 1.07rem;
    font-size: 12px;
    color: #4A90E2;
    letter-spacing: 0;
    text-align: justify;
  }
  .search-comment span{
    width: 5.14rem;
    height: 1.21rem;
    margin-left: 9.79rem;
    margin-right: 9.71rem;
  }
  .focus-icon{
    width: 3.93rem;
    height: 1.93rem;
    border: 1px solid #AD2532;
    border-radius: 0.285rem;
    display: flex;
    align-items: center;
    justify-content: center;

  }
  .focus-icon-do{
    width: 3.93rem;
    height: 1.93rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #9B9B9B;
    border-radius: 0.285rem;
  }
  .focus{
    font-size: 12px;
    color: #AD2532;
    letter-spacing: -0.29px;
    text-align: justify;
  }
  .dofocus{
    font-size: 12px;
    color: #848484;
    letter-spacing: -0.29px;
    text-align: justify;
  }
  .jia{
    font-size: 20px;
    color: #AD2532;
    text-align: justify;
    display: block;
    height: .22rem;
    line-height: .1rem;
  }
  .verification {
    font-size: 14px;
    color: #4A90E2;
    border: none;
    padding: 0;
  }
</style>
